<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0">
  <title>404 Studio 注册验证码</title>
</head>
<body>
<div class="resume-wrap">
  <div class="resume-header">
    <img class="logo-title" src="http://www.wanghaozheng.cn:8080/image/logo.png">
    <span style="margin-right: 10px;">404 Studio</span>
    <div class="header-title">欢迎</div>
  </div>
  <div class="resume-body">
    <p>Hi,<span th:text="${user}"/></p>
    <div class="body_content">用于注册 404 Studio 应用的验证码为:<span th:text="${verifyCode}"/></div>
  </div>
</div>
</body>
</html>
<style>
  .resume-wrap {
    width: 621px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0px 0px 18px 0px rgba(21, 21, 22, 0.17);
  }
  .logo-title {
    height: 50px;
    margin-right: 14px;
  }
  .header-title {
    padding-left: 14px;
    border-left: 1px solid #fff;
  }
  .resume-header {
    display: flex;
    align-items: center;
    padding: 0 22px;
    font-size: 20px;
    color: #fff;
    height: 75px;
    border-radius: 4px 4px 0px 0px;
    background: linear-gradient(251deg, #17faf2 0%, #fc2cf2 100%);
  }
  .resume-body {
    padding: 50px;
    color: #131415;
  }
  .body_content {
    line-height: 25px;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #DBE0E6;
  }
  .avatar .avatar-sex-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: 0;
  }
  .info-pos span {
    padding: 0 10px;
    border-right: 1px solid #DBE0E6;
  }
  .info-pos span:first-child {
    padding-left: 0;
  }
  .info-pos span:nth-child(n+4) {
    padding-right: 0;
    border-right: none;
  }
  .info-pos span:nth-child(n+5) {
    padding: 0;
  }
  .info-bottom img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 2px;
  }
  a {
    display: inline-block;
    margin: 10px;
    color: #F9791B;
  }
</style>